<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { webSocketManger } from './mixins/webSocketManger'
export default {
  mixins: [webSocketManger],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    fetch('/static/operDescData.json')
      .then((response) => response.json())
      .then((data) => {
        this.$store.commit('operDescData', data.descList)

      })
      .catch((error) => {
        console.error('加载操作描述配置文件失败:', error);
      });
    fetch('/static/userInfo.json')
      .then((response) => response.json()) // 解析为 JSON
      .then((data) => {
        this.userInfoJson = data;
        this.$store.commit('handleUserInfo', data);
      })
      .catch((error) => {
        console.error('加载操作人配置文件失败:', error);
      });
  },
  methods: {},
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
#app {
  height: 100%;
  /*width: 100%;*/
  /*max-width: 1950px;*/
  /*max-height: 1080px;*/
  /*margin: 0 auto;*/
  /*overflow: hidden;*/
}
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar {
  height: 8px;
}

/* 修改滚动条颜色 */
::-webkit-scrollbar-thumb {
  background-color: #999;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  opacity: 0.7;
}

::-webkit-scrollbar {
  transition: all 0.3s ease;
}
table {
  td, th {
    border: 1px solid #FFFFFF;
  }
}

// 主变 - 设置 异常状态 弹窗样式
.abnormalStatusDialog{
  background: rgba(2, 22, 42, 1) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .2) !important;
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    display: flex;
    align-items: center;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
      flex:1;
      overflow: hidden;
      margin-right: 40px;
      font-size: 16px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .ctn{
      margin: 10px 0;
      & > label{
        color: #dee2e5;
      }

    }
  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button {
      color: #ebeff0;
      background: linear-gradient(#176575, #07283f);
      border: 0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, 0.8);
      width: 8rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: linear-gradient(#1a7384, #083850);
        box-shadow: 0 -2px 0 rgba(16, 164, 195, 1);
      }

      &:active {
        background: linear-gradient(#145c66, #06283a);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(1px);
      }

      &:disabled {
        color: #b2b6b7;
        background: linear-gradient(#4a4d4e, #2c2f30);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
  }
}


.switchPatrolDialog{
  background: rgba(2, 22, 42, 1) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .2) !important;
  max-height: 130%;
  :deep(.el-textarea__inner) {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    display: flex;
    align-items: center;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
      flex:1;
      overflow: hidden;
      margin-right: 40px;
      font-size: 16px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .ctn{
      margin: 10px 0;
      & > label{
        color: #dee2e5;
      }

    }
  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button {
      color: #ebeff0;
      background: linear-gradient(#176575, #07283f);
      border: 0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, 0.8);
      width: 8rem;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: linear-gradient(#1a7384, #083850);
        box-shadow: 0 -2px 0 rgba(16, 164, 195, 1);
      }

      &:active {
        background: linear-gradient(#145c66, #06283a);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        transform: translateY(1px);
      }

      &:disabled {
        color: #b2b6b7;
        background: linear-gradient(#4a4d4e, #2c2f30);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
  }
}
svg text {
  cursor: pointer;
  font-size: 14px;
}
svg{
  overflow: visible
}
</style>
